<template>
	<view>
		<view class="login" v-if="isLogin == 'nologin'">
			<image src="../../static/logo.png" mode="widthFix"></image>
			<view class="logo-title">青云志愿</view>
			<view class="logo-text">
				您暂未授权青云志愿小程序获取你的信息，将无法正常使用小程序功能。如果要正常使用，请点击“授权登录”按钮，打开头像昵称等信息的授权
			</view>
			<button class="logo-btn" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">登录授权</button>
		</view>
		<view v-if="isLogin == 'islogin'">
			<view class="target" v-if="isShow">
				<view class="fill-target">
					<view class="fill-target-content">
						<view class="fill-target-title">我的目标</view>
						<view class="fill-target-num" v-if="baseInfo">{{baseInfo.chinese+baseInfo.math+baseInfo.english+baseInfo.synthesize}}分 | {{baseInfo.city}} | {{baseInfo.subject_type_str}} <u-icon name="edit-pen" size="32" class="edit" @click="goto('../pages/basicInfo',1)"></u-icon></view>
						<view class="fill-btn" @click="goto('../pages/chooseTarget')">立目标</view>
					</view>
				</view>
				<view class="target-title"><view>我的成绩</view></view>
				<view class="target-table">
					<view class="target-table-titile"><view></view>理科568分与近三年的高考位次及线差对比</view>
					<view class="target-table-content">
						<u-table>
							<u-tr>
								<u-th class="empty">1</u-th>
								<u-th>2020</u-th>
								<u-th>2019</u-th>
								<u-th>2018</u-th>
							</u-tr>
							<u-tr>
								<u-td>高考位次</u-td>
								<u-td>1213</u-td>
								<u-td>2231</u-td>
								<u-td>12333</u-td>
							</u-tr>
							<u-tr>
								<u-td>线性</u-td>
								<u-td>67</u-td>
								<u-td>76</u-td>
								<u-td>66</u-td>
							</u-tr>
						</u-table>
					</view>
					<view class="target-table-text">结论：近年568分对应的高考位次在14168 ~ 15420位之间，你超过了 广西 理科 92% ~93% 的考生。568分超过了最近三年本科一批分数线55 ~72分</view>
				</view>
				<view class="target-table">
					<view class="target-table-titile"><view></view>568分对应大学</view>
					<view class="target-table-titile1">2020年568分可以考上一下大学</view>
					<view class="target-table-list">
						<view class="target-table-item">
							<view class="target-table-content1">
								<image src="../../static/logo.png" mode=""></image>
								北京语言大学
								<view>北京</view>
							</view>
							<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
							<view class="target-table-content2">2020年最低分 568 位次 14168</view>
							<view class="target-table-content2">2019年最低分 581  位次 11954</view>
							<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
						</view>
						<view class="target-table-item">
							<view class="target-table-content1">
								<image src="../../static/logo.png" mode=""></image>
								北京语言大学
								<view>北京</view>
							</view>
							<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
							<view class="target-table-content2">2020年最低分 568 位次 14168</view>
							<view class="target-table-content2">2019年最低分 581  位次 11954</view>
							<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
						</view>
						<view class="target-table-item">
							<view class="target-table-content1">
								<image src="../../static/logo.png" mode=""></image>
								北京语言大学
								<view>北京</view>
							</view>
							<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
							<view class="target-table-content2">2020年最低分 568 位次 14168</view>
							<view class="target-table-content2">2019年最低分 581  位次 11954</view>
							<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
						</view>
					</view>
				</view>
				<view class="target-title"><view>努力方向</view></view>
				<view class="target-table">
					<view class="target-table-titile"><view></view>提升成绩后对应大学</view>
					<view class="target-table-tabs">
						<view>30分</view><view>50分</view><view>80分</view>
					</view>
					<view class="target-table-text1">预计提升 <text>30分</text> 后可以考上以下大学</view>
					<view class="target-table-list">
						<view class="target-table-item">
							<view class="target-table-content1">
								<image src="../../static/logo.png" mode=""></image>
								北京语言大学
								<view>北京</view>
							</view>
							<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
							<view class="target-table-content2">2020年最低分 568 位次 14168</view>
							<view class="target-table-content2">2019年最低分 581  位次 11954</view>
							<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
						</view>
						<view class="target-table-item">
							<view class="target-table-content1">
								<image src="../../static/logo.png" mode=""></image>
								北京语言大学
								<view>北京</view>
							</view>
							<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
							<view class="target-table-content2">2020年最低分 568 位次 14168</view>
							<view class="target-table-content2">2019年最低分 581  位次 11954</view>
							<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
						</view>
						<view class="target-table-item">
							<view class="target-table-content1">
								<image src="../../static/logo.png" mode=""></image>
								北京语言大学
								<view>北京</view>
							</view>
							<view class="target-table-content2 target-table-content3">公立 | 中央部属高校 | 隶属教育部</view>
							<view class="target-table-content2">2020年最低分 568 位次 14168</view>
							<view class="target-table-content2">2019年最低分 581  位次 11954</view>
							<u-icon name="arrow-right" color="#c6c6c6" class="target-arrow"></u-icon>
						</view>
					</view>
				</view>	
				<view class="target-down-btn">
					下载模考成绩报告
				</view>
			</view>
			<view class="target my-target">
				<view class="fill-target">
					<view class="fill-target-content">
						<view class="fill-target-title">我的目标</view>
						<view class="my-target-title1">2021年高考批次线公布后，将重新生成报告。</view>
						<view class="my-target-content1">
							<image src="../../static/logo.png" mode=""></image>
							华南理工大学
							<text>本科一批</text>
						</view>
						<view class="my-target-text1">广州 | 双一流A类高校 | 隶属教育部</view>
						<view class="my-target-text1">2020年最低分 627 位次 2953</view>
						<view class="my-target-text1">2019年最低分 635  位次2708</view>
						
						<view class="my-target-text2">568 分 | 广西 | 理科</view>
						
						<view class="my-target-text3"><view class="my-target-icon my-target-icon1"></view>离2021年高考还剩 123 天</view>
						<view class="my-target-text3"><view class="my-target-icon my-target-icon2"></view>你离目标学校还差 29 分</view>
						<view class="my-target-text3"><view class="my-target-icon my-target-icon3"></view>平均每天仅需提升 <text> 0.48 </text> 分</view>
						<view class="my-target-btn my-target-btn2" @click="goto('../pages/chooseTarget')">修改目标学校</view>
						<view class="my-target-btn my-target-btn1" @click="goto('../pages/myResult')">目标与成绩</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <uni-popup ref="popupGetUserInfo" type="center" :maskClick='false' class="aa">
			<view class="popup-bind popup-user-info">
				<view class="popup-user-logo">
					<image src="../../static/images/logo@2x.png" mode=""></image>
				</view>
				<view class="popup-user-msg">
					<text>新手机号将自动注册，登录即表示您已</text><br>
					<view>同意爱学生<view class="popup-user-link" @click="gotoYs('../teopages/VipAgreement')">《用户协议》</view>和<view class="popup-user-link"
						 @click="gotoYs('../teopages/userAgreement')">《隐私政策》</view>
					</view>
				</view>
				<button class="getUserInfoBtn" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">登录授权</button>
				<view class="bottom" @click="$refs.popupGetUserInfo.close()">暂不登录</view>
			</view>
		</uni-popup> -->
		<!-- 绑定手机号 -->
		<uni-popup ref="popupBindPhone" type="center" :maskClick='false' class="aa">
			<view class="popup-bind popup-user-info">
				<view class="popup-user-msg">
					<text>新手机号将自动注册，登录即表示您已</text><br>
					<view>同意青云志愿<view class="popup-user-link" @click="gotoYs('../teopages/VipAgreement')">《用户协议》</view>和<view class="popup-user-link"
						 @click="gotoYs('../teopages/userAgreement')">《隐私政策》</view>
					</view>
				</view>
				<button class="getUserInfoBtn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">绑定手机号</button>
				<view class="bottom" @click="$refs.popupBindPhone.close()">暂不登录</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	import api from 'utils/api.js'
	export default {
		components: {uniPopup},
		data() {
			return {
				isLogin: '',
				isShow: true,
				activeObj: {
					invitationCode: ''
				},
				subObj: {
					openId: '',
					sessionKey: '',
					encryptedData: '',
					iv: ''
				},
				phone: '',
				baseInfo: ''
			}
		},
		onShow() {
			let isRelogin = uni.getStorageSync('tokenw');
			let isRelogin1 = uni.getStorageSync('token');
			// 重新登录
			if(!isRelogin || !isRelogin1){
				let _this = this;
				wx.login({
				  success (res) {
					if (res.code) {
						//发起网络请求
						_this.http({
							url:`${api.ServerUrlW}api/v1/account/oAuthMiniProgram/${res.code}`,
							method:'GET',
							success: res=> {
								if(res.code == 0){
									_this.subObj.openId = res.result.oAuth.openId
									if(res.result.oAuth.token){
										uni.setStorageSync('tokenw', res.result.oAuth.token);
										uni.setStorageSync('userId', res.result.userInfo.userId);
										_this.isLogin = 'islogin';
										_this.phone = res.result.userInfo.mobile;
										uni.setStorageSync('phone', res.result.userInfo.mobile);
										_this.login();
									}else {
										console.log(2233)
										uni.hideTabBar();
										_this.isLogin = 'nologin';
									}
								}
							},
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '授权失败'
						})
						console.log('登录失败！' + res.errMsg)
					}
				  }
				})
			}else {
				this.isLogin = 'islogin';
				this.check_my_info();
			}
		},
		onLoad(options) {
			let isRelogin = uni.getStorageSync('tokenw');
			let isRelogin1 = uni.getStorageSync('token');
			// 重新登录
			if(options.relogin || !isRelogin || !isRelogin1){
				let _this = this;
				wx.login({
				  success (res) {
					if (res.code) {
						//发起网络请求
						_this.http({
							url:`${api.ServerUrlW}api/v1/account/oAuthMiniProgram/${res.code}`,
							method:'GET',
							success: res=> {
								if(res.code == 0){
									_this.subObj.openId = res.result.oAuth.openId
									if(res.result.oAuth.token){
										uni.setStorageSync('tokenw', res.result.oAuth.token);
										uni.setStorageSync('userId', res.result.userInfo.userId);
										_this.isLogin = 'islogin';
										_this.phone = res.result.userInfo.mobile;
										uni.setStorageSync('phone', res.result.userInfo.mobile);
										_this.login();
									}else {
										console.log(2233)
										uni.hideTabBar();
										_this.isLogin = 'nologin';
									}
								}
							},
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '授权失败'
						})
						console.log('登录失败！' + res.errMsg)
					}
				  }
				})
			}else {
				this.isLogin = 'islogin';
				this.check_my_info();
			}
			if(options.schoolId) {
				this.isShow = false;
			}
		},
		methods: {
			goto(name,current) {
				uni.navigateTo({
					url: name+"?current="+current
				});
			},
			bindGetUserInfo: function(e) {
				let that = this
				wx.getUserInfo({
					success: function(res) {
						console.log(res)
						setTimeout(() => {
							that.$refs.popupBindPhone.open();
						}, 1000)
					},
					fail: res => {
						uni.showToast({
							icon: 'none',
							title: '授权失败'
						})
					}
				})
			
			},
			onGetPhoneNumber: function(e) {
				// console.log(e.detail.errMsg == "getPhoneNumber:ok");
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.subObj.encryptedData = e.detail.encryptedData;
					this.subObj.iv = e.detail.iv
					this.getTokenUserData(this.subObj)
				} else {
					uni.showToast({
						title: '获取手机号失败'
					})
				}
			},
			//第一次授权获取token
			getTokenUserData(data) {
				let that = this
				if (this.activeObj.invitationCode) {
					data.invitationCode = this.activeObj.invitationCode
				}
				this.http({
					url: `${api.ServerUrlW}api/v1/account/oAuthMiniLogin`,
					method: 'POST',
					data: data,
					success: res => {
						if (res.code == 0) {
							this.phone = res.result.userInfo.mobile;
							uni.setStorageSync('phone', res.result.userInfo.mobile);
							uni.setStorageSync('token', res.result.oAuth.token);
							uni.setStorageSync('userId', res.result.userInfo.userId);
							// that.$store.commit('changeToken', res.datresulta.oAuth.token);
							that.$refs.popupBindPhone.close();
							uni.showTabBar();
							this.login();
							this.isLogin = 'islogin';
						}
					},
					fail: res => {
						that.$refs.popupBindPhone.close();
						uni.showToast({
							title: 'res'
						})
					}
				})
			},
			// 获取登录token
			login() {
				this.http({
					url: `form_v1/account/login`,
					method: 'POST',
					data: {
						mobile: this.phone,
						password: 'cXcxMmFz',
						login_account_type: 1,
						username: ''
					},
					success: res => {
						if(res.errcode == 0) {
							this.login1(res.result.token);
						}
					},
				})
			},
			// 登录
			login1(token) {
				this.http({
					url: `authenticate/login`,
					method: 'POST',
					data: {
						loginToken: token,
						loginType: 'password'
					},
					success: res => {
						if(res.errcode == 0) {
							uni.setStorageSync('token', res.result.token_data.token);
							this.check_my_info();
						}
					},
				})
			},
			check_my_info() {
				this.http({
					url: `api/v1/users/check_my_info`,
					method: 'GET',
					success: res => {
						console.log(res)
						if(res.errcode == 0) {
							if(res.result.grade_detail){
								this.baseInfo = res.result.grade_detail;
								uni.setStorageSync('userInfo', res.result.grade_detail);
							}
						}
					},
				})
			},
		}
	}
</script>

<style lang="less">
	.target {
		.fill-target {
			background-color: #45b688;
			padding: 0 40rpx;
			height: 520rpx;
			text-align: center;
			position: relative;
			.fill-target-content {
				display: block;
				width: calc(100% - 80rpx);
				min-height: 400rpx;
				box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 15px 0px;
				background-color: #FFFFFF;
				padding: 0 30rpx;
				position: absolute;
				top: 130rpx;
				.fill-target-title {
					float: left;
					background-color: #00ca8a;
					height: 60rpx;
					line-height: 60rpx;
					color: #FFFFFF;
					border-radius: 50px;
					padding: 0 40rpx;
					margin-top: -30rpx;
					margin-left: calc(50% - 96rpx);
				}
				.fill-target-num {
					margin-top: 80rpx;
					.edit {
						margin-left: 16rpx;
					}
				}
				.fill-btn {
					float: left;
					width: 100%;
					background-color: #fed45b;
					color: #FFFFFF;
					border-radius: 5px;
					height: 80rpx;
					line-height: 80rpx;
					margin-top: 120rpx;
				}
			}
		}
		.target-title {
			height: 4rpx;
			background-color: #45b688;
			margin: 100rpx 40rpx 40rpx 40rpx;
			position: relative;
			>view {
				display: inline-block;
				background-color: #45b688;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50px;
				padding: 0 30rpx;
				color: #FFFFFF;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.target-table {
			.target-table-titile {
				padding: 20rpx;
				line-height: 50rpx;
				margin-top: 20rpx;
				font-weight: bold;
				>view {
					float: left;
					height: 50rpx;
					width: 10rpx;
					background-color: #45b688;
					margin-right: 8rpx;
				}
			}
			.target-table-content {
				padding: 0 40rpx;
			}
			.target-table-text {
				padding: 0 40rpx;
				margin-top: 20rpx;
				font-size: 24rpx;
			}
			.target-table-titile1 {
				padding: 0 40rpx;
				margin-top: -20rpx;
				font-size: 24rpx;
				color: #c6c6c6;
			}
			.target-table-list {
				padding: 0 40rpx;
				
				.target-table-item {
					position: relative;
					margin-top: 40rpx;
					border-bottom: 1px solid #F1F1F1;
					padding-bottom: 36rpx;
				}
				
				.target-table-content1 {
					line-height: 82rpx;
					font-size: 36rpx;
					image {
						float: left;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					>view {
						float: right;
						font-size: 24rpx;
					}
				}
				.target-table-content2 {
					padding-left: 100rpx;
					margin-bottom: 4rpx;
				}
				.target-table-content3 {
					margin-top: -6rpx;
				}
				.target-arrow {
					position: absolute;
					right: 0;
					top: 55%;
				}
			}
			.target-table-tabs {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				text-align: center;
				padding: 0 40rpx;
				>view {
					background-color: #00ca8a;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 5px;
					width: 150rpx;
					color: #FFFFFF;
				}
			}
			.target-table-text1 {
				padding: 40rpx 0 0 40rpx;
				text {
					color: #00ca8a;
				}
			}
		}
		.target-down-btn {
			background-color: #fd7649;
			margin: 80rpx 60rpx;
			border-radius: 100px;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	.my-target {
		.fill-target {
			text-align: left;
		}
		.fill-target-title {
			background-color: #FFFFFF !important;
			color: #45b688 !important;
			border: 1px solid #45b688 !important;
		}
		.my-target-title1 {
			margin-top: 60rpx;
			margin-bottom: 40rpx;
			font-size: 13px;
			color: #fd7649;
		}
		.my-target-content1 {
			font-size: 36rpx;
			line-height: 80rpx;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				float: left;
				margin-right: 20rpx;
			}
			text {
				font-size: 24rpx;
				margin-left: 20rpx;
			}
		}
		.my-target-text1 {
			padding-left: 100rpx;
			margin-bottom: 10rpx;
		}
		.my-target-text2 {
			color: #fd7649;
			font-size: 32rpx;
			text-align: center;
			margin: 40rpx;
		}
		.my-target-text3 {
			padding-left: 70rpx;
			margin-bottom: 20rpx;
			.my-target-icon {
				float: left;
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			.my-target-icon1 {
				background: url(../../static/time.png) no-repeat;
				background-size: 100% 100%;
			}
			.my-target-icon2 {
				background: url(../../static/target.png) no-repeat;
				background-size: 100% 100%;
			}
			.my-target-icon3 {
				background: url(../../static/up.png) no-repeat;
				background-size: 100% 100%;
			}
			text {
				color: #20b86f;
				margin: 0 6rpx;
			}
		}
		.my-target-btn {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 5px;
			background-color: #fd7649;
			text-align: center;
			margin-bottom: 30rpx;
			color: #FFFFFF;
		}
		.my-target-btn1 {
			margin-bottom: 80rpx;
		}
		.my-target-btn2 {
			margin-top: 40rpx;
		}
	}
	.aa{
		position: fixed;
		z-index: 11111111;
	}
	.popup-bind{
		width: 76vw;
		border-radius: 16rpx;
		background-color: #fff;
		text-align: center;
		padding-top: 40rpx;
		.popup-bind-title{
			font-size: 32rpx;
			margin-bottom: 40rpx;
		}
		.popup-bind-content{
			font-size: 26rpx;
			color: #a1a1a1;
			margin-bottom: 40rpx;
		}
		.popup-bind-content-add{
			font-size: 28rpx;
			color: #222222;
			padding: 10rpx 20rpx;
		}
		.popup-bind-btn{
			border-top:1rpx solid #e5e5e5;
			display: flex;
			font-size: 28rpx;
			>view{
				flex: 1;
				padding: 25rpx 0;
			}
			>view:first-child{
				border-right: 1px solid #e5e5e5;
				color: #a1a1a1;
			}
		}
		.popup-bind-add{
			color: #00c183;
			font-size: 32rpx;
			padding: 20rpx;
			border-top: 1px solid #f5f5f5;
		}
		.popup-active-img{
			width: 100%;
		}
	}
	.popup-user-info {
		// padding-top: 0rpx;
		padding: 64rpx 30rpx 30rpx 30rpx;
	
		.popup-user-logo {
			>image {
				width: 160rpx;
				height: 160rpx;
			}
	
		}
	
		.popup-user-msg {
			font-size: 24rpx;
			color: #3C3C43;
			margin: 62rpx 0 48rpx 0;
	
			>text {
				line-height: 32rpx;
			}
	
			.popup-user-link {
				color: #09A775;
				display: inline-block;
			}
		}
	
		.getUserInfoBtn {
			background: #22D49A;
			color: #FFFFFF;
			border-radius: 100rpx;
			border: none;
			margin-bottom: 18rpx;
			font-size: 34rpx;
		}
	
		.bottom {
			font-size: 34rpx;
			color: #3C3C43;
		}
	}
	.popup-active{
		background-color: transparent;
		position: relative;
		.popup-active-btn{
			text-align: center;
			font-size: 28rpx;
			position: absolute;
			bottom: 50rpx;
			width: 100%;
			>view{
				display: inline-block;
				border-radius: 8rpx;
				width: 200rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
			}
			.popup-active-btn1{
				border: 1rpx solid #ff9f4d;
				color: #ff9f4d;
				margin-right: 40rpx;
			}
			.popup-active-btn2{
				border: 1px solid #ff7700;
				background-color: #ff7700;
				color: #fff;
			}
		}
	}
	.login {
		text-align: center;
		image {
			width: 200rpx;
			height: auto;
			margin-top: 100rpx;
		}
		.logo-title {
			font-weight: bold;
		}
		.logo-text {
			color: #666;
			margin-top: 60rpx;
			padding: 0 40rpx;
		}
		.logo-btn {
			line-height: 80rpx;
			width: 50%;
			border-radius: 50px;
			background-color: #00ca8a;
			margin-left: 25%;
			margin-top: 60rpx;
			color: #FFFFFF;
			text-align: center;
		}
		.logo-btn:active {
			opacity: .6;
		}
	}
</style>